@charset "UTF-8";
/***********************************************************\
 * Titre Pro Développeur Logiciel 2014
 * GRETA Béarn Soule
 * Projet Transversal Speedy Market
 * 
 * Auteurs (groupe 3) :
 *  - Émilie Cahuzac
 *  - Jean-Paul Grandgirard
 *  - Nicolas Kuntziger
 *  - Séverine Pires Léal
 *
 * Feuille de style principale du front office
 *
 * # SOMMAIRE
 * 01-- Styles de base
 * 02-- Helpers
 * 03-- Layout
 * 04-- Header
 * 05-- Navigation
 * 06-- Accueil
 * 07-- Listing produit
 * 08-- Fiche Produit
 * 09-- Page Panier
 * 10-- Footer
 \***********************************************************/
 @font-face {
  font-family: 'speedy-market';
  src: url("../fonts/speedy-market-webfont.eot");
  src: url("../fonts/speedy-market-webfont.eot?") format("embedded-opentype"), url("../fonts/speedy-market-webfont.woff") format("woff"), url("../fonts/speedy-market-webfont.ttf") format("truetype"), url("../fonts/speedy-market-webfont.svg#speedy-marketregular") format("svg");
}


/***********************************************************\
 * 01-- Styles de base
 *      -> règles de type balise
 \***********************************************************/
 html,
 body {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  background-image: url(../img/fond-header.png);
  background-repeat: repeat-x;
}

/* FORMULAIRES */
input {
  padding: 0;
  margin: 0;
}

input[type='password'],
input[type='email'],
input[type='text'] {
  height: 27px;
  border: 1px solid #b8b8b8;
  border-radius: 6px;
  -webkit-box-shadow: 1px 4px 2px #b8b8b8 inset;
  -moz-box-shadow: 1px 4px 2px #b8b8b8 inset;
  box-shadow: 1px 4px 2px #b8b8b8 inset;
  padding-left: 8px;
}
a {
    
}

/***********************************************************\
 * 02-- Helpers
 *      -> classes utilitaires généralistes
 \***********************************************************/
 .centimes {
  font-size: 12px;
}

.clear {
  clear: both;
}

.icone-texte {
  font-family: speedy-market;
}

/***********************************************************\
 * 03-- Layout
 *      -> structure générale des pages
 \***********************************************************/
 .speedy-container {
  width: 1000px;
  margin: 0 auto;
  padding-bottom: 35px;
}


.nav {
    overflow: auto;
}

.content {
  position: relative;
  margin: 15px 0 35px 0;
  
}

/***********************************************************\
 * 04-- Header
 *      -> Entête des pages
 \***********************************************************/
 .header {
  position: relative;
  height: 150px;  
}

.header-logo {
  position: relative;
  top: 15px;
  left: 30px;
}

.header-slogan {
  position: absolute;
  bottom: 8px;
  left: 265px;
  font-size: 22px;
}

.header-visuel {
  position: absolute;
  bottom: 0px;
  right: 225px;
}

.header-connexion {
  position: absolute;
  top: 0px;
  left: 200px;
  padding: 5px;
}

.header input[type='password'],
.header input[type='text'] {
  width: 90px;
}

.header input[type='submit'] {
  position: relative;
  top: 9px;
  width: 23px;
  height: 27px;
  background-color: inherit;
  background-image: url(../img/bouton-connexion.png);
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
}

.header-connexion form {
  padding: 0;
  margin: 0;
}

.header-connexion a {
  display: block;
  color: #6b6b6b;
}

.header-panier {
  position: absolute;
  top: 3px;
  right: 20px;
  width: 190px;
  border: 1px solid #b8b8b8;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 5px 5px #b8b8b8;
  -moz-box-shadow: 0px 5px 5px #b8b8b8;
  box-shadow: 0px 5px 5px #b8b8b8;
  background-color: white;
  background-image: url(../img/fond-titre-panier.png);
  background-repeat: no-repeat;
  background-position: 18px 7px;
}

.header-panier-lien {
  color: #000;
  text-decoration: none;
}

.header-panier h1 {
  margin: 0;
  padding: 5px 0 0 59px;
  height: 40px;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: -1px;
}

.header-panier div {
  padding: 5px;
  min-height: 20px;
  border-bottom: 1px solid #b8b8b8;
  -webkit-box-shadow: 0px 3px 3px #dedede;
  -moz-box-shadow: 0px 3px 3px #dedede;
  box-shadow: 0px 3px 3px #dedede;
}

.header-panier table {
  border: none;
  width: 100%;
}

.header-panier-etendre {
  display: block;
  margin-top: 5px;
  height: 16px;
  background-image: url(../img/fleche-etendre-panier.png);
  background-repeat: no-repeat;
  background-position: center top;
}
.header-panier-etendre.ouvert {
  background-image: url(../img/fleche-fermer-panier.png);
}

/***********************************************************\
 * 05-- Navigation
 *      -> Navigation principale du site
 \***********************************************************/
 .nav-menu {
  margin: 0 auto;
  padding: 22px 0 0 15px;
  height: 115px;
}
.nav-menu li {
  float: left;
  list-style: none;
  margin-left: 11px;
}
.nav-menu li a {
  display: block;
  width: 69px;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 12px;
  text-decoration: none;
}
.nav-menu  li a span {
  display: block;
  width: 67px;
  height: 67px;
  margin-bottom: 5px;
  border: 1px solid white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
  font-size: 50px;
  line-height: 69px;
}

a.nav-bleu {
  color: #77c7d6;
}

a.nav-bleu span {
  color: #fff;
  background-color: #77c7d6;
}

a.nav-bleu:hover span {
  background-color: #fff;
  color: #77c7d6;
  border: 1px solid #77c7d6;
}

a.nav-orange {
  color: #ee8722;
}

a.nav-orange span {
  color: #fff;
  background-color: #ee8722;
}

a.nav-orange:hover span {
  background-color: #fff;
  color: #ee8722;
  border: 1px solid #ee8722;
}

a.nav-rose {
  color: #dc4472;
}

a.nav-rose span {
  color: #fff;
  background-color: #dc4472;
}

a.nav-rose:hover span {
  background-color: #fff;
  color: #dc4472;
  border: 1px solid #dc4472;
}

a.nav-vert {
  color: #94be3f;
}

a.nav-vert span {
  color: #fff;
  background-color: #94be3f;
}

a.nav-vert:hover span {
  background-color: #fff;
  color: #94be3f;
  border: 1px solid #94be3f;
}

.nav-secondaire {
    clear: both;
    float: left;
    width: 730px;
}

.ariane {
    margin-left: 15px;
}

.recherche {
  float: right; 
  margin-right: 23px;
}

.recherche label {
  display: block;
  padding: 10px 0 10px 0;
}
.recherche input[type='text'] {
  background-image: url(../img/loupe.png);
  background-repeat: no-repeat;
  background-position: left 5px;
  padding-left: 30px;
}
.recherche input[type='submit'] {
  display: none;
  width: 23px;
  height: 27px;
  background-color: inherit;
  background-image: url(../img/bouton-connexion.png);
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
}

/***********************************************************\
 * 06-- Accueil
 *      -> Styles spécifiques à la page d'accueil
 \***********************************************************/

 /* SLIDER Flexslider 2 */

 .slider {
   clear: both;
   position: relative;
   width: auto;
   height: auto;

}

.slides li {
  position: relative;
}

.slider-texte {
  position: absolute;
  top: 20px;
  left: 80px;
  width: 265px;
  height: 265px;
  background-image: url(../img/opacity-70.png);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
  padding: 15px;
  overflow: hidden;
}

/* flèches personnalisées du flexslider */
.flex-direction-nav  .flex-prev { 
	height: 100px; 
	margin-left: -8px;
	top: 40%;
	background-image: url('../img/slider-fleche-gauche.png');
}

.flex-direction-nav  .flex-next {
	height: 100px; 
	margin-right: -8px;	
	top: 40%;	
	background-image: url('../img/slider-fleche-droite.png');
}



/* PANNEAU D'INFORMATION */
.panneau-bas {
  position: relative;
}

.panneau-bas-engagements {
  float: left;
  width: 700px;
  margin-top: 35px;
  padding: 0 25px;
}
.panneau-bas-engagements a {
  display: block;
  float: left;
  width: 165px;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-position: top center;
  text-align: center;
  text-decoration: none;
  color: black;
}
.panneau-bas-engagements a .icone-texte {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  display: block;
  font-size: 50px;
  line-height: 65px;
}
.panneau-bas-engagements a .popup {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: -30px;
  width: 330px;
}
.panneau-bas-engagements a:hover .popup {
  opacity: 1;
  visibility: visible;
}
.panneau-bas-engagements a .popup-top {
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -ms-border-radius: 10px 10px 0 0;
  -o-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  padding: 10px;
  background-color: #fff;
}
.panneau-bas-engagements a .popup-top h3 {
  font-size: 16px;
}
.panneau-bas-engagements a .popup-top span {
  display: block;
  text-align: left;
}
.panneau-bas-engagements a .popup-bottom {
  width: 330px;
  height: 25px;
  background-image: url(../img/fleche-bulle-engagement.png);
}

.panneau-bas-engagements a.bleu h3 {
  color: #77c7d6;
}

.panneau-bas-engagements a.bleu:hover .icone-texte {
  color: #77c7d6;
}

.panneau-bas-engagements a.orange h3 {
  color: #ee8722;
}

.panneau-bas-engagements a.orange:hover .icone-texte {
  color: #ee8722;
}

.panneau-bas-engagements a.rose h3 {
  color: #dc4472;
}

.panneau-bas-engagements a.rose:hover .icone-texte {
  color: #dc4472;
}

.panneau-bas-engagements a.vert h3 {
  color: #94be3f;
}

.panneau-bas-engagements a.vert:hover .icone-texte {
  color: #94be3f;
}

.panneau-bas-newsletter {
  margin-right: 30px;
  float: right;
  width: 180px;
}
.panneau-bas-newsletter h2 {
  text-transform: uppercase;
  font-size: 18px;
  line-height: 33px;
  margin: 35px 0 5px 0;
}
.panneau-bas-newsletter .icone-texte {
  float: right;
}
.panneau-bas-newsletter input {
  display: block;
}
.panneau-bas-newsletter input[type="email"] {
  width: 100%;
}
.panneau-bas-newsletter input[type="submit"] {
  background-color: inherit;
  border: none;
  cursor: pointer;
  padding-top: 5px;
}
.panneau-bas-newsletter input[type="submit"]:hover {
  text-decoration: underline;
}

/***********************************************************\
 * 07-- Listing produit
 *      -> Styles spécifiques au listing produit
 \***********************************************************/

 /* filtres et pagination */
 .filtres {
   margin-left: 15px;     
   padding-top: 20px;
}		

/*  Boutons remplacés par une liste déroulante

.filtres-bouton-categorie {
	position: relative;
	float: left;			
	width: 400px;
	height: auto;	
	margin-left: 15px;
}

.filtre-bouton-categorie-bleue button {
	background-color: white;
	color: black;		
	//font-weight: bold;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;		
	border: solid 1px #848484;	
	padding: 1px;	
	margin-bottom: 2px;
	font-size: 13px;	
	-webkit-box-shadow: 3px 3px 5px #b8b8b8;
	-moz-box-shadow: 3px 3px 5px #b8b8b8;
	box-shadow: 3px 3px 5px #b8b8b8;							
}

.filtre-bouton-categorie-bleue button:hover {
	background-color: #77C7D6;
	color: white;		
	border-radius: 6px;	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;		
	border: solid 1px #848484;			
	-webkit-box-shadow: inset 3px 3px 5px #b8b8b8;
	-moz-box-shadow: inset 3px 3px 5px #b8b8b8;	
	box-shadow: inset 2px 2px 0px #848484;		
}		

.filtre-bouton-categorie-bleue button:active {
	background-color: #77C7D6;
	color: white;		
	border-radius: 6px;	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;		
	border: solid 1px #848484;
	-webkit-box-shadow: inset 3px 3px 5px #b8b8b8;
	-moz-box-shadow: inset 3px 3px 5px #b8b8b8;	
	box-shadow: inset 2px 2px 0px #848484;	
}
*/		

.filtre-liste {	
	position: relative;
	float: left;
	width: 550px; 
	height: auto;	
	margin-right: 5px;

}

.filtre-liste select{				
	border-radius: 6px;	
	border: solid 1px #848484;				
	-webkit-box-shadow: 3px 3px 5px #b8b8b8;
	-moz-box-shadow: 3px 3px 5px #b8b8b8;
	box-shadow: 3px 3px 5px #b8b8b8;			
}		

.pagination {
	position: relative;
	float: left;
	width: 150px;
	height: auto;
	margin-left: 5px;
	margin-right: 5px;	
}

.page-active {
	font-weight: bold;
}

.bouton-page {
	position: relative;
	border-radius: 6px;	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;	
	border: solid 1px #848484;	
	background-color: white;
	-webkit-box-shadow: 3px 3px 5px #b8b8b8;
	-moz-box-shadow: 3px 3px 5px #b8b8b8;
	box-shadow: 3px 3px 5px #b8b8b8;
	margin-left: 1px;
	margin-right: 1px;
	width: 22px;
}

.bouton-page:hover {
	font-weight: bold;
}

.bouton-page:active{
	font-weight: bold;
}		

.bouton-page-prec-bleu{
	position: relative;
	float: left;
	top: 0;	
	background-image: url(../img/bouton-page-prec-bleu.png);
	width: 23px;
	height: 25px;
}

.bouton-page-suiv-bleu{
	position: relative;
	float: right;
	top: 0;
	left: -18px;
	background-image: url(../img/bouton-page-suiv-bleu.png);
	width: 23px;
	height: 25px;
}

/* vignettes article */

.listing-articles {
  position: relative;
  width: 750px;
}

.article-thumb {
  position: relative;
  float: left;
  width: 150px;
  height: 250px;
  margin: 10px 15px;
  border: 1px solid #77c7d6;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
  -webkit-box-shadow: 3px 3px 5px #b8b8b8;
  -moz-box-shadow: 3px 3px 5px #b8b8b8;
  box-shadow: 3px 3px 5px #b8b8b8;
}

.article-thumb:hover {
  -webkit-box-shadow: 3px 3px 3px #b8b8b8;
  -moz-box-shadow: 3px 3px 3px #b8b8b8;
  box-shadow: 3px 3px 3px #b8b8b8;
  top: -1px;
  left: 1px;
}

.article-thumb p {
  margin: 0px;
}

.article-thumb-title {
  font-size: 14px;
  text-align: center;
  font-weight: normal;
  font-variant: small-caps;
  margin-top: 7px;
  margin-bottom: 5px;
}
.article-thumb-desc {
  overflow: hidden;
  height: 47px;
}

.article-thumb-price {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 75px;
  height: 49px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background-color: #77c7d6;
  color: #fff;
  font-size: 22px;
  line-height: 49px;
  text-align: right;
  padding-right: 5px;
}

.article-thumb-button, .article-thumb-ajout-liste, .article-thumb-ajout-panier {
  display: block;
  position: absolute;
  left: 1px;
  width: 67px;
  height: 22px;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #b8b8b8;
}

.article-thumb-ajout-liste {
  bottom: 24px;
  height: 22px;
}
.article-thumb-ajout-liste img {
  margin-top: 2px;
}

.article-thumb-ajout-panier {
  bottom: 1px;
  height: 20px;
}
.article-thumb-ajout-panier img {
  margin-top: 4px;
}


/***********************************************************\
 * 08-- Fiche Produit
 *      -> Styles spécifiques à la fiche Produit
 \***********************************************************/

 .fancybox-skin h1{
    text-align: center;
    -moz-box-shadow: 0px 10px 10px 0px #cfcfcf;
    -webkit-box-shadow: 0px 10px 10px 0px #cfcfcf;
    -o-box-shadow: 0px 10px 10px 0px #cfcfcf;
    box-shadow: 0px 10px 10px 0px #cfcfcf;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=180, Strength=10);
}
.fancybox-skin h2{
    font-size: 14px;
}
.fancybox-skin .fp_content {
    /*    background-color: pink;*/
    width:900px;
    min-height:600px;
    overflow:auto;
    
}
.fancybox-skin .fp_desc_longue,
.fancybox-skin .fp_photos_et_prix,
.fancybox-skin .fp_produit_gestion{
    width:30%;
    min-height:50px;
    float:left;
}
.fancybox-skin .fp_photos_et_prix,
.fancybox-skin .fp_produit_gestion{
 margin-left: 40px;
}
.fancybox-skin .fp_photos_large {
    width:100%;
    height:400px;
    
}
.fancybox-skin .fp_photos_large img{
    margin-top:30px;
    width:100%;
}
.fancybox-skin .fp_photos_min{
  text-align:center;
}

.fancybox-skin .fp_prix_kg{
  font-size:16px;
  text-align:center;
  margin-top:20px;
  
  margin-left: auto;
  margin-right: auto;
}
.fancybox-skin .fp_prix_produit{
    font-size:36px;
    color:white;
    margin-top:20px;
    text-align:center;
    width:40%;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px #848484;
    background-color: red;
    
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    
    -moz-box-shadow: 5px 5px 10px 0px #cfcfcf;
    -webkit-box-shadow: 5px 5px 10px 0px #cfcfcf;
    -o-box-shadow: 5px 5px 10px 0px #cfcfcf;
    box-shadow: 5px 5px 10px 0px #cfcfcf;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=134, Strength=10);
    
    
}
.fancybox-skin .centimes{
    font-size:16px;
}

.fancybox-skin .fp_ajouter_selection,
.fancybox-skin .fp_ajouter_panier,
.fancybox-skin .fp_conseiller{
    width:200px;
    height:30px;  
    font-family: Verdana, sans-serif;
    margin-top:15px;
    margin-left:30px;
    background-color: #f5f4f4;
    cursor: pointer;
    
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;		

    -webkit-box-shadow: 3px 3px 5px #b8b8b8;
    -moz-box-shadow: 3px 3px 5px #b8b8b8;
    box-shadow: 3px 3px 5px #b8b8b8;
    
}

.fancybox-skin .fp_ajouter_selection:hover,
.fancybox-skin .fp_ajouter_panier:hover,
.fancybox-skin .fp_conseiller:hover {

    -webkit-box-shadow: inset 2px 3px 5px #d4d4d4;
    -moz-box-shadow: inset 2px 3px 5px #d4d4d4;	
    box-shadow: inset 2px 2px 0px #d4d4d4;		
}
.fancybox-skin .fp_ajouter_selection{
    margin-top:50px;
    
}
.fancybox-skin .fp_ajouter_selection{
    text-align:center;
    vertical-align: middle;
}
.fancybox-skin .fp_reseaux_sociaux{
    margin-top:20px;
    text-align: center;
    overflow:auto;
    width:50%;
    margin-left: auto;
    margin-right:auto;
    
}
.fancybox-skin .fp_reseaux_sociaux img{
    width:40px; 
    height:auto;
    float:left;
    margin-left:10px;
    cursor:pointer;
}
.fancybox-skin .fp_reseaux_sociaux img:hover{
    width:42px; 
}

/***********************************************************\
 * 09-- Liste Panier
 *      -> Styles spécifiques à la page du panier
 \***********************************************************/

 .listpanier{
    width: 700px;
    height: auto;
    margin: auto;
}

.listpanier td th{
    vertical-align: auto ;
}

.listpanier input{
    border-radius: 6px;
}

.bouton-panier{
    background-color: #f5f4f4;
	color: black;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;		
	border: solid 1px #848484;	
	/*padding: 1px;*/	
	margin-bottom: 2px;
	font-size: 13px;	
	-webkit-box-shadow: 3px 3px 5px #b8b8b8;
	-moz-box-shadow: 3px 3px 5px #b8b8b8;
	box-shadow: 3px 3px 5px #b8b8b8;
}

.bouton-panier:hover{
    background-color: #f5f4f4;
	color: black;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-ms-border-radius: 6px;
	-o-border-radius: 6px;		
	border: solid 1px #848484;	
	/*padding: 1px;*/	
	margin-bottom: 2px;
	font-size: 13px;	
	-webkit-box-shadow: 3px 3px 5px #b8b8b8;
	-moz-box-shadow: 3px 3px 5px #b8b8b8;
	box-shadow: inset 2px 2px 0px #b8b8b8;
}

/***********************************************************\
 * 10-- Footer
 *      -> Styles spécifiques au pied de page
 \***********************************************************/
 .footer {
  clear: both;
  width: 100%;
  height: 80px;
  background-image: url(../img/fond-footer.png);
  background-repeat: repeat-x;
  text-align: center;
  padding-top: 1px;
}
.footer a {
  padding: 0 15px;
  color: #000;
  text-decoration: none;
}
